
<template>
    <div class="menu">
        <a class="menu-item" v-for="item of menuItems" :key="item.id">
            <img :src="item.url">
        </a>
    </div>
</template>

<script>
export default {
    name: 'Menu',
    data() {
        return {
            menuItems:[
                {
                    id:1,
                    name:'小米秒杀',
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6'
                },
                {
                    id:2,
                    name:'小米众筹',
                    url:'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD'
                },
                {
                    id:3,
                    name:'小米秒杀',
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6'
                },
                {
                    id:4,
                    name:'小米众筹',
                    url:'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD'
                },
                {
                    id:5,
                    name:'小米众筹',
                    url:'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD'
                },
                {
                    id:6,
                    name:'小米秒杀',
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6'
                },
                {
                    id:7,
                    name:'小米众筹',
                    url:'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD'
                },
                {
                    id:8,
                    name:'小米秒杀',
                    url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb65daec7ef7b52cc785f88f78efba37.png?w=216&h=228&bg=FDF1E6'
                },
                {
                    id:9,
                    name:'小米众筹',
                    url:'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD'
                },
                {
                    id:10,
                    name:'小米众筹',
                    url:'https://i8.mifile.cn/v1/a1/eb5024fe-dfe3-6e53-3e18-675bef5fa06e.webp?w=216&h=228&bg=EAF6FD'
                }
            ]
        }
    }
}
</script>

<style lang="stylus">
.menu
    display flex;
    justify-content:space-between;
    align-items center;
    flex-wrap wrap;
    .menu-item
        display inline-block
        width 82px;
        height 87px;
        margin-bottom 1px;
        img
            width 100%;
            height 100%;
</style>